<template>
	<view class="content">
		<view class="btn" :class="{ disabled: loading }" @tap="handleRequest">
			请求接口
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { apiGetDemo } from "@/services";

// 请求状态
const loading = ref(false);

// 点击请求
function handleRequest() {
	loading.value = true;
	apiGetDemo({
		// 显示成功提示
		success: true,
	})
		.then((res) => {
			loading.value = false;
			console.log("请求成功::", res);
		})
		.catch((err) => {
			loading.value = false;
			console.log("请求失败::", err);
		});
}
</script>

<style lang="scss">
.content {
	padding: 20px;

	.btn {
		height: 50px;
		background: #0069ff;
		color: #ffffff;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		font-size: 15px;
		border-radius: 5px;

		&.disabled {
			opacity: 0.6;
			pointer-events: none;
		}
	}
}
</style>
